<template>
	<div :style="bj">
		<el-form class="register_form" ref="registerref" :model="registerform" label-width="80px" :rules="registerrules">
		  <el-form-item label="用户名" prop="username">
		    <el-input v-model="registerform.username" placeholder="请输入用户名"></el-input>
		  </el-form-item>
		  <el-form-item label="密码" prop="password">
		    <el-input type="password" v-model="registerform.password" placeholder="请输入密码" show-password  prefix-icon="el-icon-lock"></el-input>
		  </el-form-item>
		  <el-form-item label="确认密码" prop="checkPass">
		    <el-input type="password" v-model="registerform.checkPass" autocomplete="off" show-password></el-input>
		  </el-form-item>
		  <el-form-item label="性别">
		     <el-radio-group v-model="registerform.sex">
		       <el-radio label="男"></el-radio>
		       <el-radio label="女"></el-radio>
		     </el-radio-group>
		   </el-form-item>
		   <el-form-item label="年龄" prop="age">
		     <el-input v-model="registerform.age" placeholder="请输入年龄"></el-input>
		   </el-form-item>
		   <el-form-item label="邮箱" prop="email">
		     <el-input v-model="registerform.email" placeholder="请输入邮箱"></el-input>
		   </el-form-item>
		   <el-form-item label="头像">
		   	<!-- 图片上传 -->
		   	<!-- action:默认上传的路径 
		   	list-type：上传组件的样式
		   	on-preview：图片放大函数
		   	on-remove：图片移除的函数
		   	on-success：上传成功后的函数-->
		     <el-upload
		       action="http://localhost:8888/crowdfunding_system_war_exploded/upload"
		       list-type="picture-card"
		       :on-preview="handlePictureCardPreview"
		       :on-remove="handleRemove"
		   	   :on-success="addSuccess">
		       <i class="el-icon-plus"></i>
		     </el-upload>
		     <!-- 图片放大后的对话框 -->
		     <el-dialog :visible.sync="dialogVisible">
		       <img width="100%" :src="dialogImageUrl" alt="">
		     </el-dialog>
		   </el-form-item>
		   <!-- 注册确定 -->
		   <el-button type="primary" @click="submit">注册</el-button>
		   <!-- 重置 -->
		   <el-button type="info" @click="reset">重置</el-button>
		   <!-- 返回 -->
		   <el-button type="warning" @click="returnLogin">返回</el-button>
		</el-form>
	</div>
</template>

<script>
	import qs from "qs";
	export default{
		data(){
			// 自定义邮箱验证的规则
			var checkEmail = ((rule,value,callback)=>{
				if(!value){//value为空
					return callback(new Error('邮箱不能为空'))
				}
				//判断是否符合邮箱的正则表达式
				var reg= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
				if(!reg.test(value)){
					return callback(new Error('邮箱格式不合法'))
				}
				return callback();
			});
			var validatePass = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请再次输入密码'));
			        } else if (value !== this.registerform.password) {
			          callback(new Error('两次输入密码不一致!'));
			        } else {
			          callback();
			        }
			      };
			return{
				
				bj: {
				  backgroundImage: "url(" + require("../img/轻语.png") + ")",
				  backgroundRepeat: "no-repeat",
				  backgroundSize: "100%",
				  padding:"30px,0px"
				  },
				// 添加用户对象
				registerform:{
					address:'',
					username:'',
					password:'',
					checkPass:'',
					sex:'',
					age:'',
					email:'',
					aid:'',
					tx:'',
					token:'',
					
				},
					
				registerrules:{
						username:[
							{ required: true, message: '请输入用户名', trigger: 'blur' },
							{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
						],
						password:[
							{ required: true, message: '请输入密码', trigger: 'blur' },
							{ min: 6, max: 6, message: '长度在 6 个字符', trigger: 'blur' }
						],
						checkPass: [
						    {validator: validatePass, trigger: 'blur' }
						],
						email:[
							{validator: checkEmail,trigger:'blur'}
						]	
					},
					dialogImageUrl:'',
					dialogVisible:false,
				
			}
		},
		methods:{
			submit(){
				this.$refs.registerref.validate(async(bo)=>{
						if(bo){
							var res=await this.$http.post('register',qs.stringify(this.registerform));
							// 处理返回值信息，并给出不同的信息提示
							if(res.data.code == 200){  // 添加成功
							this.$message.success(res.data.message);
							this.$router.push("/login")
							}else{
								this.$message.error(res.data.message);
							}
						}else{
							this.$message.error('格式不合法');
						}
					})
				},
			reset(){
				this.$refs.registerref.resetFields();
			},
			// 图片移除
			handleRemove(file, fileList) {
			        // console.log(file, fileList);
					this.registerform.tx='';
			},
			// 图片放大
			handlePictureCardPreview(file) {
			        this.dialogImageUrl = file.url;
			        this.dialogVisible = true;
			},
			// 图片上传成功后的函数
			addSuccess(res){
				// console.log(res)
				if(res.code==200){
					this.registerform.tx=res.message;
				}
			},
			// 返回登录界面
			returnLogin(){
				this.$router.push("/login")
			}
		
			
			
		},
		
	}
</script>

<style>
	.register_form{
		width: 350px;
		padding: 100px 100px 45px 100px;
		justify-content: center;
		align-items: center;
		height: 600px;
		margin: 0px auto;
		box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 10px;
		text-align: center;
	}
</style>
